<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="panel-item" data-title="基础信息">
					<div class="section-title">模板信息</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">模板名称</div>
							<div class="val">
								<el-input v-model="form.title" placeholder="">
								</el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">是否只使用内容</div>
							<div class="val">
								<el-radio-group v-model="form.isContent">
									<el-radio  :label="1">是</el-radio>
									<el-radio  :label="0">否</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
					
					<div class="input-item">
						<div class="input-box flex" >
							<div class="label">上传背景图片</div>
							<div class="input-item">
								<w_base_upload_image  @uploadChange="uploadChange" />
							</div>
						</div>
					</div>
					<div class="input-item" v-if="$route.query.id && form.image">
						<div class="input-box flex" >
							<div class="label">背景图片</div>
							<img :src="form.image" alt="" style="object-fit: contain; width: 100px;height: 100px;" />
						</div>
					</div>
					
					<!-- 商品参数 -->
					<div class="section-box section-params"
						v-if="dataList_addrows.length ">
						<div class="section-title" >自定义参数</div>
						<div class="section-ctx">
							<div class="loop-wrap">
								<div class="table-sec">
									<div class="factorAdd" style="margin-bottom: 10px;">
										<span></span>
										<el-button type="primary" @click="addRow">增加行数据</el-button>
									</div>
									<el-table :data="dataList_addrows" stripe border>
										<el-table-column prop="name" label="标题" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.title">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="name" label="标题字体大小" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.titleSize">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="name" label="标题字体颜色" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.titleColor">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="name" label="内容字体大小" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.contentSize">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="name" label="内容字体颜色" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.contentColor">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="name" label="标题与内容直接间隔" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.space">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="name" label="是否输入内容" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.isshow">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
					
										<el-table-column prop="value" label="X值" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.x">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column prop="value" label="Y值" width="auto">
											<template slot-scope="scope">
												<div class="params-box">
													<el-input clearable="" v-model="scope.row.y">
													</el-input>
												</div>
											</template>
										</el-table-column>
										
										<el-table-column label="操作" width="80px">
											<template slot-scope="scope">
												<el-button size="mini" type="text" @click="deleteRow(scope.$index)">
													删除
												</el-button>
											</template>
										</el-table-column>
									</el-table>
					
								</div>
							</div>
						</div>
					</div>
					<!-- 商品参数 -->
					
				</div>
				
				<span slot="footer" class="dialog-footer">
					<el-button type="" @click="formCancel">取消</el-button>
					<el-button type="primary" @click="do_submit()">确认</el-button>
				</span>
				
			</div>
			
		</div>
		
		
		
	</div>
</template>

<script>
	import w_base_upload_image from '@/components/base/w_base_upload_image.vue'
	export default {
		components: {
			w_base_upload_image,
		},
		data() {
			return {
				form: {
					id: this.$route.query.id||'',
					title: "",
					isContent:'',
					image:''
				},
				//商品自定义参数
				dataList_addrows: [
					{
						title: '',
						titleSize:'',
						titleColor:'',
						contentSize:'',
						contentColor:'',
						space:'',
						isshow:'',
						x: '',
						y: '',
					},
				],
				preview_image_is_show:false,
				options: [{
				  value: '0',
				  label: '否'
				}, {
				  value: '1',
				  label: '是'
				}],
			}
		},
		mounted(){
			if(this.$route.query.id>0){
				this.query_detail()
			}
		},
		// 自定义参数列表
		methods: {
			addRow() {
				this.dataList_addrows.push({ title: '',titleSize:'',titleColor:'',contentSize:'',contentColor:'',space:'',isshow:'', x: '', y: '' });
			},
			formCancel() {
				this.$router.back();
			},
			uploadChange(url) {
				this.form.image = url;
			},
			do_submit(){
				if (!this.form.title) {
					alertErr("请填写模板名称");
					return;
				}
				// if (!this.form.invoiceRemark) {
				// 	alertErr("请填写开票备注");
				// 	return;
				// }		
				/* if (!this.form.invoiceUrl) {
					alertErr("请上传发票附件");
					return;
				} */
				console.log(JSON.stringify(this.dataList_addrows),'100')
				
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "Pt_editPtModel",
						...this.form,
						content: JSON.stringify(this.dataList_addrows),
					}
				}).then(res => {
					alert(res)
					if (res.code == 200) {
						this.toBack()
					}
				})
			},
			query_detail(){
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "Pt_getPtModel",
						id:this.$route.query.id
					}
				}).then(res => {
					/* alert(res) */
					if (res.code == 200) {
						this.form.title=res.data.title
						this.form.isContent=res.data.isContent
						this.dataList_addrows=res.data.content
						this.form.image=res.data.image
						this.preview_image_is_show = true;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/ .upload-image .el-upload {
		width: 100px;
		height: 100px;
		line-height: 98px;
	}

	/deep/ .upload-video .el-upload {
		width: 100px;
		height: 100px;
		line-height: 98px;

		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		box-sizing: border-box;
		cursor: pointer;
		vertical-align: top;
	}

	/deep/ .el-upload-list__item {
		background: #eef6ff !important;
		font-size: 16px;
	}

	.video-preview-box {
		margin-top: 20px;
	}





	.footer-actions {
		display: flex;
		justify-content: flex-end;
		justify-content: center;
		position: fixed;
		z-index: 100;
		bottom: 0;
		right: 0;
		left: 190px;
		padding: 10px;
		background: #fff;
		box-shadow: 0 0 1px 0 #ccc;
		padding-right: 35px;
	}





	// .el-radio-group.column {
	//   display: flex;
	//   flex-direction: column;
	// }

	.tip-input {
		margin-left: 20px;
		display: inline-block;
		max-width: 150px;
	}

	.time-divider {
		margin: 0 15px;
	}

	.page-wrap {
		.page-inner {}
	}

	.page-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.section-title {
		margin-bottom: 20px;
		width: 100%;
		height: auto;
		line-height: 46px;
		background: rgb(241, 242, 245);
		padding-left: 30px;
		font-size: 16px;
		font-weight: 600;
	}

	.panel-item {
		padding-bottom: 100px;
		// .flex();
		// flex-wrap: wrap;

		.input-item {
			margin-bottom: 20px;
			width: 100%;
			max-width: 800px;
			// width: 50%;

			&.hidden-item {
				display: none;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.input-box {
				width: 100%;
				display: flex;
				align-items: flex-start;

				.label {
					height: 32px;
					line-height: 32px;
					min-width: 160px;
					min-width: 100px;
					text-align: right;
					margin-right: 40px;
					font-size: 20px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #666666;

					&.required {
						position: relative;

						&:after {
							content: "*";
							color: #f00;
							position: absolute;
							right: -15px;
							top: 3px;
							// font-weight: bold;
						}
					}

					&.hidden {
						visibility: hidden;
					}
				}
			}

			//输入框组
			.inputs {
				.flex();

				.date-box {
					flex: 1;
				}

				.shuru-box {
					margin-left: 20px;
					flex: 4;
				}
			}

			.val {
				flex: 2;
				font-size: 20px;
				font-family: PingFang SC;
				color: #000000;

				.shuru {
					width: 100%;
					padding-left: 20px;
					outline: none;
					height: 40px;
					background: #ffffff;
					border: 1px solid #d4d8eb;
					border-radius: 4px;
					font-size: 16px;
				}

				.form-ele {
					.el-input {
						width: 100%;
					}

					.el-select {
						width: 100%;
					}

					.el-cascader {
						width: 100%;
					}
				}

				.input-tip {
					line-height: 32px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #666;
				}
			}
		}
	}

	// 标签
	.tag-wrap {

		// 标签样式
		.cus-tag-item {
			margin-right: 15px;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.button-new-tag {
			margin-left: 10px;
			height: 32px;
			line-height: 30px;
			padding-top: 0;
			padding-bottom: 0;
		}

		.input-new-tag {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		}

		.cus-tag-input {
			-webkit-appearance: none;
			background-color: #fff;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			outline: 0;
			padding: 0 15px;
			width: 90px;
			height: 32px;
			line-height: 32px;
			transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

			&:focus {
				border-color: #66b1ff;
			}
		}

		// 标签样式

		.table-box {
			width: 100%;
			border-collapse: 0;
			/* table-layout: fixed; */
			border: 1px solid #eee;
			font-size: 14px;
		}

		.table-box tr {
			/* min-height: 40px; */
		}

		.table-box th {
			text-align: left;
			padding: 10px 10px;

			border-right: 1px solid #eee;
		}

		.table-box td {
			text-align: left;
			padding: 10px 10px;
			border-top: 1px solid #eee;
			border-right: 1px solid #eee;
		}

		.table-box td:nth-child(1) {
			width: 20%;
		}

		.table-box td:nth-child(2) {
			width: 80%;
		}

		.table-box .tag-item {
			cursor: pointer;
			outline: none;
			user-select: none;
			margin-right: 10px;
			display: inline-flex;
			align-items: center;
			color: #333;
		}

		.table-box .tag-item:before {
			content: "";
			width: 20px;
			height: 20px;
			display: inline-block;
			background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			margin-right: 3px;
		}

		.table-box .tag-item.checked:before {
			background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
		}
	}


	.loop-add {
		margin-top: 20px;
	}
</style>